import React, { useState,useEffect } from 'react';
import NumericalSlider from '../NumericalSlider/NumericalSlider';
function index(props) {
  const {data,boyFlag,grilFlag} = props;
  return (
    <div className="project-items">
      {
        data.map((item,index)=>{
          if(!boyFlag&&!grilFlag){
            return <div className="project-item">
                <h3>{item.year}</h3>
                  <NumericalSlider
                  lineStyle={{ color: '#1677FF', height: 6 }}
                  marks={[
                          { value: item.girl_value, markStyle: { color: '#019CFD' }},
                          {
                            value: item.boy_value,
                            markStyle: { color: '#FFB52B' },
                            label: <strong style={{ color: '#FFB52B' }}>{item.boy_value}</strong>,
                          }]
                  }
                />
              </div>
          }else if(!boyFlag){
            return <div className="project-item">
                <h3>{item.year}</h3>
                  <NumericalSlider
                  lineStyle={{ color: '#1677FF', height: 6 }}
                  marks={[
                          {
                            value: item.boy_value,
                            markStyle: { color: '#FFB52B' },
                            label: <strong style={{ color: '#FFB52B' }}>{item.boy_value}</strong>,
                          }]
                  }
                />
              </div>
          }else if(!grilFlag){
            return <div className="project-item">
                <h3>{item.year}</h3>
                  <NumericalSlider
                  lineStyle={{ color: '#1677FF', height: 6 }}
                  marks={[
                    { value: item.girl_value, markStyle: { color: '#019CFD' }}]
                  }
                />
              </div>
          }



          // if(!item.girl_value&&!item.boy_value){
          //   return <div className="project-item">
          //   <h3>{item.year}</h3>
          //   <NumericalSlider
          //   lineStyle={{ color: '#1677FF', height: 6 }}
          //   marks={[]}
          //   />
          //   </div>
          // }else if(item.girl_value&&!item.boy_value){
          //   return <div className="project-item">
          //   <h3>{item.year}</h3>
          //   <NumericalSlider
          //   lineStyle={{ color: '#1677FF', height: 6 }}
          //   marks={[{ value: item.girl_value, markStyle: { color: '#019CFD' }}]}
          //   />
          //   </div>
          // }else if(!item.girl_value&&item.boy_value){
          //   return <div className="project-item">
          //   <h3>{item.year}</h3>
          //   <NumericalSlider
          //     lineStyle={{ color: '#1677FF', height: 6 }}
          //     marks={[{
          //       value: item.boy_value,
          //       markStyle: { color: '#FFB52B' },
          //       label: <strong style={{ color: '#FFB52B' }}>{item.boy_value}</strong>,
          //     }]}
          //   />
          //   </div>
          // }else{
          //   return <div className="project-item">
          //   <h3>{item.year}</h3>
          //     <NumericalSlider
          //     lineStyle={{ color: '#1677FF', height: 6 }}
          //     marks={[
          //             { value: item.girl_value, markStyle: { color: '#019CFD' }},
          //             {
          //               value: item.boy_value,
          //               markStyle: { color: '#FFB52B' },
          //               label: <strong style={{ color: '#FFB52B' }}>{item.boy_value}</strong>,
          //             }]
          //     }
          //   />
          //   </div>
          // }

          // return <div className="project-item">
          //   <h3>{item.year}</h3>
          //   <NumericalSlider
          //   lineStyle={{ color: '#1677FF', height: 6 }}
          //   marks={[
          //           { value: item.girl_value, markStyle: { color: '#019CFD' }},
          //           {
          //             value: item.boy_value,
          //             markStyle: { color: '#FFB52B' },
          //             label: <strong style={{ color: '#FFB52B' }}>{item.boy_value}</strong>,
          //           }]
          //   }
          // />
          // </div>
        })
      }
    </div>
  );
}

export default index;
